<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-divider content-position="left">售后记录</el-divider>
				<OrderAfterRecords ref="orderAfterRecordsRef" />
				<el-divider content-position="left">申请信息</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品名称" prop="goods_title">
							<el-input v-model="state.ruleForm.goods_title" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="购买数量" prop="total_num">
							<el-input v-model="state.ruleForm.total_num" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品售价" prop="sale_price">
							<el-input v-model="state.ruleForm.sale_price" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="商品总售价" prop="total_amt">
							<el-input v-model="state.ruleForm.total_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="供货单价" prop="cost_price">
							<el-input v-model="state.ruleForm.cost_price" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="供货总价" prop="supplier_amt">
							<el-input v-model="state.ruleForm.supplier_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="运费" prop="trans_amt">
							<el-input v-model="state.ruleForm.trans_amt" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付金额(含运费)" prop="pay_amt">
							<el-input v-model="state.ruleForm.pay_amt" disabled />
						</el-form-item>
					</el-col>
				</el-row>
				<el-divider content-position="left">审核处理</el-divider>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="审核结果" prop="one_after_status">
							<el-select v-model="state.ruleForm.one_after_status">
								<el-option label="审核同意" :value="2" />
								<el-option label="审核拒绝" :value="1" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col v-if="state.ruleForm.one_after_status === 2" :span="12">
						<el-form-item label="退货地址" prop="supplier_address_id">
							<el-select
								v-model="state.ruleForm.supplier_address_id"
								clearable
								placeholder="请输入关键字/选择退货地址"
								filterable
								remote
								:remote-method="supplierAddressIdRemoteMethod"
								remote-show-suffix
								:loading="state.supplierAddressIdSelect.loading"
								@focus="onSupplierAddressIdFocus"
							>
								<el-option v-for="item in state.supplierAddressIdSelect.options" :key="item.id" :label="item.info" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="审核说明" :prop="state.ruleForm.one_after_status === 1 ? 'content' : ''">
							<template #label>
								{{ state.ruleForm.one_after_status === 3 ? '拒绝原因' : '审核说明' }}
							</template>
							<el-input v-model="state.ruleForm.content" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">审 核</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, reactive, ref } from 'vue';
import { goodsApi, orderApi } from '/@/api';

const OrderAfterRecords = defineAsyncComponent(() => import('../orderAfterRecords.vue'));

let callback: Function = () => {};
const OrderApi = orderApi();
const GoodsApi = goodsApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		goods_title: '',
		total_num: '',
		sale_price: '',
		total_amt: '',
		cost_price: '',
		supplier_amt: '',
		service_amt: '',
		agent_amt1: '',
		agent_amt2: '',
		agent_amt3: '',
		trans_amt: '',
		pay_amt: '',
		order_after_id: '',
		one_after_status: 2,
		supplier_id: '',
		supplier_address_id: '',
		content: '',
	},
	rules: {
		content: [{ required: true, message: '内容不能为空', trigger: ['blur'] }],
		supplier_address_id: [{ required: true, message: '退货地址不能为空', trigger: ['blur', 'change'] }],
	},
	supplierAddressIdSelect: {
		loading: false,
		options: [] as any,
	},
});
const formRef = ref();
const orderAfterRecordsRef = ref();

/********** 触发事件 **********/
// 退货地址获取焦点
const onSupplierAddressIdFocus = () => {
	if (state.ruleForm.supplier_address_id) return;
	_goodsSelectSupplierAddress({ pageNum: 1, pageSize: 10, supplier_id: state.ruleForm.supplier_id });
};
// 取消
const onCancel = () => {
	orderAfterRecordsRef.value.onCancel();
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		state.dialog.submitLoading = true;
		if (state.ruleForm.one_after_status === 1) {
			_orderAfterOneCheck({
				order_after_id: state.ruleForm.order_after_id,
				one_after_status: 1,
				one_confuse_reason: state.ruleForm.content,
			});
		} else {
			_orderAfterOneCheck({
				order_after_id: state.ruleForm.order_after_id,
				one_after_status: 2,
				one_remark: state.ruleForm.content,
				supplier_address_id: state.ruleForm.supplier_address_id,
			});
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any, fn: Function) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.order_after_no}」售后审核`;
	callback = fn;
	state.ruleForm = {
		goods_title: row.goods_title,
		total_num: row.order_detail_info.total_num,
		sale_price: row.order_detail_info.sale_price,
		total_amt: row.order_detail_info.total_amt,
		cost_price: row.order_detail_info.cost_price,
		supplier_amt: row.order_detail_info.supplier_amt,
		service_amt: row.order_detail_info.service_amt,
		agent_amt1: row.order_detail_info.agent_amt1,
		agent_amt2: row.order_detail_info.agent_amt2,
		agent_amt3: row.order_detail_info.agent_amt3,
		trans_amt: Number(row.order_detail_info.trans_amt) ? row.order_detail_info.trans_amt : '包邮',
		pay_amt: row.order_detail_info.pay_amt,
		supplier_id: row.order_detail_info.supplier_id,
		order_after_id: row.id,
		one_after_status: 2,
		supplier_address_id: '',
		content: '',
	};
	setTimeout(() => {
		orderAfterRecordsRef.value.openDialog(row);
	}, 1000);
};
// 退货地址搜索选择
const supplierAddressIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectSupplierAddress({ pageNum: 1, pageSize: 10, name: query, supplier_id: state.ruleForm.supplier_id });
};

/********** 网络请求 **********/
// 选择供应商退换货地址
const _goodsSelectSupplierAddress = (params: Object) => {
	state.supplierAddressIdSelect.loading = false;
	GoodsApi.goodsSelectSupplierAddress(params)
		.then((res) => {
			state.supplierAddressIdSelect.options = res.data.list.map((item: any) => {
				return {
					...item,
					info: `${item.name},${item.mobile},${item.address}`,
				};
			});
		})
		.catch(() => (state.supplierAddressIdSelect.loading = false));
};
// 售后一审
const _orderAfterOneCheck = (params: Object) => {
	OrderApi.orderAfterOneCheck(params)
		.then(() => {
			ElMessage.success('操作成功');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
